<template>
  <div class="home-card">
    <el-row :gutter="20" >
      <el-col :span="6">
        <el-card shadow="hover" style="height: 120px;">
          <div class="content-con">
            <div class="left-area" style="background: rgb(45, 140, 240); width: 36%;">
              <i class="icon el-icon-user"
                 style="font-size: 36px; color: rgb(255, 255, 255);"></i>
            </div>
            <div class="right-area" style="width: 64%;">
              <div>
                <div class="count-to-wrapper">
                                <span class="content-outer" style="display: block;margin-top: 10px;">
                                    <span class="count-style">803</span>
                                </span>
                  <span style="display: block">新增用户</span>
                </div>
              </div>
            </div>
          </div>

        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" style="height: 120px;">
          <div class="content-con">
            <div class="left-area" style="background: rgb(228, 108, 187); width: 36%;">
              <i class="icon el-icon-s-order"
                 style="font-size: 36px; color: rgb(255, 255, 255);"></i>
            </div>
            <div class="right-area" style="width: 64%;">
              <div>
                <div class="count-to-wrapper">
                                <span class="content-outer" style="display: block;margin-top: 10px;">
                                    <span class="count-style">803</span>
                                </span>
                  <span style="display: block">新增订单</span>
                </div>
              </div>
            </div>
          </div>

        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" style="height: 120px;">
          <div class="content-con">
            <div class="left-area" style="background: rgb(25, 190, 107); width: 36%;">
              <i class="icon fa fa-rmb"
                 style="font-size: 36px; color: rgb(255, 255, 255);"></i>
            </div>
            <div class="right-area" style="width: 64%;">
              <div>
                <div class="count-to-wrapper">
                                <span class="content-outer" style="display: block;margin-top: 10px;">
                                    <span class="count-style">803</span>
                                </span>
                  <span style="display: block">新增收益</span>
                </div>
              </div>
            </div>
          </div>

        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" style="height: 120px;">
          <div class="content-con">
            <div class="left-area" style="background: rgb(255, 153, 0); width: 36%;">
              <i class="icon el-icon-bell"
                 style="font-size: 36px; color: rgb(255, 255, 255);"></i>
            </div>
            <div class="right-area" style="width: 64%;">
              <div>
                <div class="count-to-wrapper">
                                <span class="content-outer" style="display: block;margin-top: 10px;">
                                    <span class="count-style">803</span>
                                </span>
                  <span style="display: block">最新消息</span>
                </div>
              </div>
            </div>
          </div>

        </el-card>
      </el-col>

    </el-row>

    <el-row :gutter="20" style="height: 350px;margin-top: 15px;">
      <el-col :lg="8" :xl="1">
        <div id="main1" style="width:100%;height:500px;padding: 20px;"></div>

      </el-col>
      <el-col :lg="16" :xl="1">
          <div id="main2" style="width:calc(100%- 40px);height:500px;padding: 20px;"></div>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="height: 350px;margin-top: 15px;">
      <el-col :span="24">
          <div id="main3" style="width:calc(100%- 40px);height:500px;padding: 20px;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    data () {
      return {
        myChart1:null,
        option1:{
          title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        },
        myChart2:null,
        option2:{
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              barWidth: '60%',
              data: [10, 52, 200, 334, 390, 330, 220]
            }
          ]
        },
        myChart3:null,
        option3:{
          title: {
            text: '折线图堆叠'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '邮件营销',
              type: 'line',
              stack: '总量',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '联盟广告',
              type: 'line',
              stack: '总量',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '视频广告',
              type: 'line',
              stack: '总量',
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: '直接访问',
              type: 'line',
              stack: '总量',
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: '搜索引擎',
              type: 'line',
              stack: '总量',
              data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
          ]
        },
        list: [],
      }
    },
    mounted: function () {
      let _this= this;
      this.myChart1=echarts.init(document.getElementById('main1'));
      this.myChart2=echarts.init(document.getElementById('main2'));
      this.myChart3=echarts.init(document.getElementById('main3'));
      this.myChart1.setOption(this.option1)
      this.myChart2.setOption(this.option2)
      this.myChart3.setOption( this.option3)

      window.onresize= ()=> {
        _this.myChart1.resize();
        _this.myChart2.resize();
        _this.myChart3.resize();
      }
    }
  }
</script>

<style>
  .home-card .el-card__body {
    padding: 0!important;

  }
  @media only screen and (min-width: 1200px){
   .home-card  .el-col-lg-8 {
      width: 33.33333%!important;
    }
  }

  @media only screen and (min-width: 1200px) {
    .el-col-lg-16 {
      width: 66.66667%!important;
    }
  }
</style>
<style scoped>
  .content-con {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .content-con .left-area {
    float: left;
    height: 120px;
    display: table;
    text-align: center;
  }

  .left-area > .icon {
    display: table-cell;
    vertical-align: middle;
  }

  .content-con .right-area {
    float: left;
    height: 100%;
    display: table;
    text-align: center;
  }

  .count-to-wrapper .content-outer {
    display: inline-block;
  }

  .count-style {
    font-size: 50px;
  }
</style>
